<template>
	<div>
		<h1>
			docker viewer
		</h1>
		<div class="card">
			<kv label="adminToken">
				<el-input v-model="query.adminToken"></el-input>
			</kv>
			<kv label="服务器地址">
				<el-input v-model.lazy="query.host"></el-input>
			</kv>
			<kv>
				<el-button size="small" @click="conn_click()">连接</el-button>
			</kv>

			<kv label="docker container">
				<selector :data="containers" v-model="query.container"
				          @change="container_change_click"></selector>
			</kv>
		</div>
		<div class="navigate">
			<el-tag @click="tag_click(0)">根目录</el-tag>
			<template v-for="(item,index) in navigators">
				<span v-if="index">/</span>
				<el-tag @click="tag_click(index+1)">{{ item }}</el-tag>
			</template>
		</div>

		<div ref="div1" class="pop_menu div1" @click.prevent.stop>
			<div class="title">{{  $data.hover_item.name }}</div>
			<el-button size="small" type="primary" @click="path_click($data.hover_item)" >进入</el-button>
			<el-button size="small" type="primary" @click="rename_click($data.hover_item)">改名</el-button>
			<el-button size="small" type="primary" @click="delete_click($data.hover_item)">删除！</el-button>
		</div>
		<div ref="div2" class="pop_menu div2" @click.prevent.stop>
			<div class="title">{{ $data.hover_item.name }}</div>
			<el-button size="small" type="primary" @click="view_click($data.hover_item)">查看</el-button>
			<el-button size="small" type="primary" @click="download_click($data.hover_item)">下载</el-button>
			<el-button size="small" type="primary" @click="rename_click($data.hover_item)">改名</el-button>
			<el-button size="small" type="primary" @click="copy_click($data.hover_item)">Copy到宿主机</el-button>
			<el-button size="small" type="primary" @click="delete_click($data.hover_item)">删除！</el-button>
		</div>
		<!--        <div v-menu:div1 style="position: absolute;left: 200px;background-color: red;padding: 30px;"-->
		<!--             @mousedown.right="$data.hover_item={name:'ok'}">dfdf-->
		<!--        </div>-->
		<div class="card_path">
			<el-button size="small" type="primary" @click="mkdir_click">创建</el-button>
			<div v-for="item in paths" :key="item.id">
				<el-tag v-menu:div1 @click.native="path_click(item)" @mousedown.native.right="cont_click(item)">
					{{ item.name }}
				</el-tag>
			</div>
		</div>
		<div class="card_file">
			<div v-for="item in files" :key="item.id">
				<el-tag v-menu:div2 @dblclick.native="view_click(item)" @mousedown.native.right="$data.hover_item=item">
					{{ item.name }}
				</el-tag>
				{{ item.size }}
			</div>
		</div>

		<upload
			:maxCount="1"
			v-model="file"
			fileType="*"
			:axiosConfig="{baseURL:query.host,headers:{'adminToken':query.adminToken}}"
			@changed="upload_click"
		></upload>
	</div>
</template>

<script setup>




//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"query":{"adminToken":"","host":"","container":""},"hover_item":{},"containers":[],"navigators":[],"paths":[],"files":[],"file":{}});


const $props = defineProps({

});



//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const getWorkPath = function() {
    return $data.navigators.map(it => "/" + it).join("") || "/"
};
const cont_click = function(item) {
    $data.hover_item = item
};
const ajax = function(url, data) {
    return jv.$http
        .post($data.query.host + url + "?adminToken=" + $data.query.adminToken, Object.assign({
            container: $data.query.container,
            work_path: getWorkPath()
        }, data));
};
const rename_click = function(item) {
    jv.prompt("修改名称：" + item.name, "", {inputValue: item.name}).then(res => {
        ajax("/dev/docker/file/rename", {name: item.name, newName: res.value}).then(res => {
            jv.info("修改为 " + res.value + " !")
            list();
        })
    })
};
const copy_click = function(item) {
    jv.confirm("Copy 到： /${uploadPath}/docker-" + Date.today().toDateString() + "/${当前时间}/" + item.name).then(res => {
        ajax("/dev/docker/file/copy2host", {name: item.name}).then(res => {
            jv.info("Copy 成功！")
            list();
        })
    })
};
const delete_click = function(item) {
    jv.confirm("确认删除 " + name + " ?").then(res => {
        ajax("/dev/docker/file/delete", {name: item.name}).then(res => {
            jv.info("删除 " + item.name + " 成功！")
            list();
        })
    });
};
const mkdir_click = function() {
    jv.prompt("新建文件夹：").then(res => {
        ajax("/dev/docker/file/mkdir", {name: res.value}).then(res => {
            jv.info("新建 " + res.value + " 成功！")
            list();
        })
    })
};
const download_click = function(item) {
    var query = {};
    query.view = false;
    query.adminToken = $data.query.adminToken;
    query.container = $data.query.container;
    query.work_path = getWorkPath();
    query.name = item.name;
    jv.downloadFile(($data.query.host || jv.SERVER_HOST || "") + "/dev/docker/file/download?" + jv.param(query))
};
const conn_click = function() {
    if (jv.chk_main($data) == false) return;
    jv.$saveData("query",$data.query)
    var container_url = $data.query.host + '/dev/docker/containers?adminToken=' + $data.query.adminToken + "&name=" + ($data.query.docker || "");
    jv.$http.post(container_url).then(res=>{
        $data.containers = res.data.data;
    })
};
const tag_click = function(index) {
    $data.navigators = $data.navigators.slice(0, index);
    list()
        .catch(res => {
            $data.navigators.pop();
        });
};
const path_click = function(item) {
    $data.navigators.push(item.name);
    list();
};
const view_click = function(item) {
    var query = {};
    query.view = true;
    query.adminToken = $data.query.adminToken;
    query.container = $data.query.container;
    query.work_path = getWorkPath();
    query.name = item.name;
    window.open($data.query.host + "/dev/docker/file/view?" + jv.param(query), "_blank")
};
const container_change_click = function(v) {
    jv.$saveData("query",$data.query)
    $data.navigators = [];
    list();
};
const list = function() {
    if (!$data.query.container) {
        return Promise.reject();
    }
    return ajax("/dev/docker/file/list")
        .then(res => {
            var json = res.data.data;
            $data.paths = json.filter(it => it.startsWith("d"))
                .map(it => {
                    var sects = it.replace(/\s+/g, " ").split(" ");
                    return {p: sects[0], size: sects[4], name: sects[8]}
                }).filter(it => {
                    return it && it.name && it.name != "." && it.name != ".."
                });
            $data.files = json.filter(it => it.startsWith("-"))
                .map(it => {
                    var sects = it.replace(/\s+/g, " ").split(" ");
                    return {p: sects[0], size: sects[4], name: sects[8]}
                });
        });
};
const upload_click = function(value) {
    ajax("/dev/docker/file/upload", {
        name: value.name,
        dbFile: value
    }).then(res => {
        $data.file = {};
        list();
    })
};

onMounted( function() {
    jv.$loadData("query", v=> $data.query = v )
    if (!$data.query.host) {
        $data.query.host = jv.$route.query.host || "";
    }
    if (!$data.query.adminToken) {
        $data.query.adminToken = jv.$route.query.adminToken || "";
    }
} )



</script>

<style scoped lang="scss">
.pop_menu {
	position: absolute;
	visibility: hidden;
	z-index: 999;
	padding: 12px;
	border: solid 1px gray;
	box-shadow: 3px 3px 10px 3px grey;
}

.div1 {
	background-color: #7ffddb;
}

.div2 {
	background-color: #fdf994;
}

.pop_menu .title {
	margin-bottom: 16px;
	font-size: large;
	font-weight: bold;
}

.pop_menu :deep(button) {
	margin-bottom: 10px;
}


.res {
	width: 100%;
	min-height: 300px;
	height: 500px;
}

.toolbar button {
	margin: 10px 40px 10px 0;
	padding: 5px 12px;
}

.card_path {
	display: flex;
	border: solid 1px green;
	margin: 10px;
	flex-wrap: wrap;
	background-color: #8e44d2;
	border-radius: 10px;
}

.card_file {
	display: flex;
	border: solid 1px blue;
	margin: 10px;
	flex-wrap: wrap;
	border-radius: 10px;
	background-color: #aedbf0;
}

.card_path > div, .card_file > div {
	margin: 12px 18px;
	background-color: lightgrey;
	white-space: nowrap;
	border-radius: 5px;
	cursor: default;
}

.card_path > div :deep(span),
.card_file > div :deep(span) {
	border-radius: 5px;
}

.card_path > div:hover :deep(.el-tag) {
	background-color: #298f8c;
	color: white;
}

.hover {
	background-color: #298f8c;
	color: white;
}
</style>
